<template>
  <div>
    <el-card class="box-card">
      <div class="btn">
        <span>项目进度:</span>
        <el-button size="small" type="primary">全部</el-button>
        <el-button size="small">进行中</el-button>
        <el-button size="small">已退回</el-button>
        <el-button size="small">已完成</el-button>
      </div>
      <div class="search">
        <span>查询内容:</span>
        <el-input size="small" placeholder="项目名称/负责人/项目类型/合同额..."></el-input>
        <el-button size="small">查询</el-button>
        <el-button size="small" @click="dialogFormVisible = true">高级查询</el-button>

        <!--弹框-->
        <el-dialog :title="'内容查询'" :width="dialogWidth" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="项目名称">
              <el-input style="width: 60%;" size="small" clearable v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="到期进展">
              <el-select style="width:60%;margin-left: 10px;" size="small" v-model="form.process" placeholder="请选择">
                <el-option label="所有" value="all"></el-option>
                <el-option label="内审修改" value="inner_edit"></el-option>
                <el-option label="技审修改" value="tec_edit"></el-option>
                <el-option label="风险分析审核" value="crisis"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人">
              <el-select style="width:60%;margin-left: 25px;" size="small" v-model="form.leader" placeholder="请选择">
                <el-option label="所有" value="all"></el-option>
                <el-option label="张三" value="name1"></el-option>
                <el-option label="李四" value="name2"></el-option>
                <el-option label="王五" value="name3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合同额">
              <el-input style="width: 60%;margin-left: 25px;" size="small" clearable v-model="form.amount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目类型">
              <el-select style="width:60%;margin-left: 10px;" size="small" v-model="form.type" placeholder="请选择">
                <el-option label="所有" value="all"></el-option>
                <el-option label="个人" value="one"></el-option>
                <el-option label="团队" value="team"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="dialogFormVisible = false">查  询</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
    <el-card class="charts" shadow="hover">
      <div>
        <span style="width: 80px;margin: 6px 10px;float: left;">所有项目</span>
        <span style="margin: 6px 20px;float: left;">
          共有<cite style="color: skyblue;margin: 0 4px 0 4px;">50</cite>
          个项目
        </span>
        <span style="margin: 6px 40px;float: left">
          (项目承接:<cite style="color: skyblue;margin: 0 4px 0 4px;">10</cite>
          ;项目实施:<cite style="color: skyblue;margin: 0 4px 0 4px;">10</cite>
          ;项目审核:<cite style="color: skyblue;margin: 0 4px 0 4px;">10</cite>
          ;项目归档:<cite style="color: skyblue;margin: 0 4px 0 4px;">20</cite>)
        </span>
        <el-button style="float: right;margin-bottom: 4px;" size="small">导出</el-button>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          height="250">
        <el-table-column
            fixed
            type="selection"
            width="55"
            align="center">
        </el-table-column>
        <el-table-column
            fixed
            prop="type"
            label="项目类型"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="项目名称"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="leader"
            label="项目负责人"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="amount"
            label="合同额"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="hold"
            label="项目承接"
            width="300"
            align="center">
        </el-table-column>
        <el-table-column
            prop="apply"
            label="项目实施"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="check"
            label="项目审核"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="archer"
            label="项目归档"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Project",
    data(){
      return{
        dialogFormVisible: false,
        dialogWidth: '450px',
        form:{
          name: '',
          process: '',
          leader: '',
          amount: '',
          type: '',
        },
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        tableData: [{
          type: '个人',
          name: 'AAAA',
          leader: 's',
          amount: '200w',
          hold: '2022/02/01',
          apply: '',
          check: '2022/02/01',
          archer: '',
        }, {
          type: '团队',
          name: 'AAAA',
          leader: 's',
          amount: '200w',
          hold: '2022/02/01',
          apply: '',
          check: '2022/02/01',
          archer: '',
        }, {
          type: '个人',
          name: 'AAAA',
          leader: 's',
          amount: '200w',
          hold: '2022/02/01',
          apply: '',
          check: '2022/02/01',
          archer: '',
        }, {
          type: '个人',
          name: 'AAAA',
          leader: 's',
          amount: '200w',
          hold: '2022/02/01',
          apply: '',
          check: '2022/02/01',
          archer: '',
        }, {
          type: '个人',
          name: 'AAAA',
          leader: 's',
          amount: '200w',
          hold: '2022/02/01',
          apply: '',
          check: '2022/02/01',
          archer: '',
        }, {
          type: '个人',
          name: 'AAAA',
          leader: 's',
          amount: '200w',
          hold: '2022/02/01',
          apply: '',
          check: '2022/02/01',
          archer: '',
        }, {
          type: '个人',
          name: 'AAAA',
          leader: 's',
          amount: '200w',
          hold: '2022/02/01',
          apply: '',
          check: '2022/02/01',
          archer: '',
        }]
      }
    },
    methods:{
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style lang="scss" scoped>
.box-card{
  font-size: 18px;
  width: 100%;
  margin-bottom: 10px;
  .btn{
    margin-bottom: 10px;
    .el-button{
      margin-left: 10px;
    }
  }
  .search{
    .el-input{
      margin-left: 10px;
      width: 30%;
    }
    .el-button{
      margin-left: 10px;
    }
  }
}
.block{
  text-align: center;
  padding-top: 10px;
}
</style>
